﻿@using DormMS.Model.Enum

@{
    Layout = null;
}

<style>
    .my-drop-zone {
        border: dotted 3px lightgray;
    }

    .nv-file-over {
        border: dotted 3px red;
    }
    /* Default class applied to drop zones on over */
    .another-file-over-class {
        border: dotted 3px green;
    }

    html, body {
        height: 100%;
    }

    canvas {
        background-color: #f3f3f3;
        -webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
        -moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
        box-shadow: 3px 3px 3px 0 #e3e3e3;
        border: 1px solid #c3c3c3;
        height: 100px;
        margin: 6px 0 0 6px;
    }

    .ngdialog.ngdialog-theme-plain .ngdialog-content {
        width: 50% !important;
    }
</style>

<div ng-controller="DrawRewardEditNewCtrl">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <form name="formValidate" ng-submit="submitForm()" novalidate="" class="form-validate form-horizontal">
                    <div class="panel panel-default" ng-class="{ 'whirl standard': isLoading}">
                        <div class="panel-body">
                            <fieldset class="b0">
                                <legend>{{Reward.Id == 0 || Reward.Id == null ? '添加奖项' : '修改奖项'}}</legend>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">奖项名</label>
                                    <div class="col-sm-6">
                                        <div class="form-inline">
                                            <input style="width: 70%;" type="text" name="name" required="" ng-model="Reward.RewardName" class="form-control" maxlength="200" />
                                        </div>
                                        <span ng-show="validateInput('name', 'required')" class="text-danger">请输入活动名称</span>
                                    </div>
                                    <div class="col-sm-2">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">奖项类型</label>
                                    <div class="col-sm-2">
                                        <select ng-model="Reward.RewardType" class="form-control" ng-change="changeType()">
                                            <option value="1">实体商品</option>
                                            <option value="2">优惠券</option>
                                            <option value="3">积分奖励</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <h4 class="text-danger" style="color:red">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset ng-show="Reward.RewardType==@((int)RewardType.奖励积分)||Reward.RewardType==@((int)RewardType.优惠券)">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">奖品</label>
                                    <div class="col-sm-6">
                                        <select ng-model="Reward.ProductSecpId" class="form-control" ng-options="m.Id as m.Name for m in ProductList">
                                            <option value="">请选择奖品</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <h4 class="text-danger" style="color:red">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">奖品派发总数</label>
                                    <div class="col-sm-2">
                                        <input type="number" ng-model="Reward.Count" class="form-control" />
                                    </div>
                                    <div class="col-sm-2">
                                        <h4 class="text-danger" style="color:red">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset ng-show="Reward.RewardType==@((int)RewardType.奖励积分)">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">奖励积分数</label>
                                    <div class="col-sm-2">
                                        <input type="number" ng-model="Reward.Points" class="form-control" />
                                    </div>
                                    <div class="col-sm-2">
                                        <h4 class="text-danger" style="color:red">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">中奖几率（百分数）</label>
                                    <div class="col-sm-2">
                                        <input type="number" ng-model="Reward.WinRate" class="form-control" />
                                    </div>
                                    <div class="col-sm-2">
                                        <h4 class="text-danger" style="color:red">*</h4>
                                    </div>
                                </div>
                            </fieldset>    
                            
                            <fieldset ng-show="Reward.RewardType==@((int)RewardType.实体商品)">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">请选择实体奖品</label>
                                    <div class="col-sm-10">
                                        <div>
                                            <table class="table table-striped table-bproducted table-hover">
                                                <colgroup>
                                                    <col style="width: 20%" />
                                                    <col style="width: 20%" />
                                                    <col style="width: 20%" />
                                                    <col style="width: 10%" />
                                                </colgroup>
                                                <thead>
                                                    <tr>
                                                        <th class="text-center" colspan="2">产品名称</th>
                                                        <th class="text-center">规格</th>
                                                        <th class="text-center">销售价</th>
                                                        <th class="text-center">库存</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr ng-show="ChosenProduct.Id>0">
                                                        <td class="text-left" style="vertical-align: middle">
                                                            <img ng-src="{{ImgHostUrl+ ChosenProduct.ImgUrl}}" style="max-width: 100px; max-height: 100px; text-align: center;" onerror="javascript: this.src = '/Content/img/default.png';" />
                                                        </td>
                                                        <td class="text-left">{{ChosenProduct.Name}}</td>
                                                        <td class="text-center">{{ChosenProduct.SpecNames}}</td>
                                                        <td class="text-center">{{ChosenProduct.Price.toFixed(2)}}</td>
                                                        <td class="text-center">{{ChosenProduct.Stock-ChosenProduct.WaitSendStock}}</td>
                                                        <td class="text-center">
                                                            <button type="button" class="btn btn-warning" ng-click="delectThisData(ChosenProduct.Id)">删除</button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <span ng-show="ChosenProduct.Id<=0" class="text-danger">请选择商品</span>
                                            <br />
                                            <div class="text-right">
                                                <button type="button" class="btn btn-info" ng-click="relationProductSelectInit()">选择商品</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                           
                        </div>
                        <div class="panel-footer text-right">
                            <button type="button" class="btn btn-warning" ng-click="cancel()">返回列表</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/ng-template" id="productSelectDialogId">
        <div class="ngdialog-message">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="form-inline ng-pristine ng-valid">
                        <div class="form-group">
                            <input placeholder="关键字" class="form-control" type="text" ng-model="ProductSelectModel.Keywords">
                            <select ng-options="m.Id as m.CategoryName for m in FirstCategoryList" ng-model="ProductSelectModel.FirstCategoryId" ng-change="GetSecondCategory()" class="form-control">
                                <option value="">请选择一级分类</option>
                            </select>
                            <select ng-options="m.Id as m.CategoryName for m in SecondCategoryList" ng-model="ProductSelectModel.SecondCategoryId" class="form-control">
                                <option value="">请选择二级分类</option>
                            </select>
                            <button type="submit" class="btn btn-labeled btn-primary" ng-click="tableParams.$params.page = 1;tableParams.reload()">
                                <span class="btn-label">
                                    <em class="fa fa-search"></em>
                                </span>搜索
                            </button>
                        </div>
                    </div>
                </div>
                <table ng-table="tableParams" class="table table-striped table-bproducted table-hover">
                    <colgroup>
                        <col style="width: 10%" />
                        <col style="width: 15%" />
                        <col style="width: 20%" />
                        <col style="width: 15%" />
                        <col style="width: 15%" />
                        <col style="width: 15%" />
                        <col style="width: 10%" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th class="text-center"></th>
                            <th class="text-center" colspan="2">产品名称</th>
                            <th class="text-center">规格</th>
                            <th class="text-center">销售价</th>
                            <th class="text-center">库存</th>
                        </tr>
                    </thead>
                    <tr ng-repeat="product in $data">
                        <td>
                            <div class="checkbox c-checkbox">
                                <label>
                                    <input type="checkbox" ng-click="checkProduct($event,product)" ng-checked="isChecked(product.Id)" />
                                    <span class="fa fa-check"></span>
                                </label>
                            </div>
                        </td>
                        <td>
                            <img ng-src="{{ImgHostUrl+ product.ImgUrl}}" style="max-width: 100px; max-height: 100px;text-align:center;margin-left:5px" onerror="javascript: this.src = '/Content/img/default.png';" />
                        </td>
                        <td class="text-left"> {{product.Name}}</td>
                        <td class="text-center">{{product.SpecNames}}</td>
                        <td class="text-center">{{product.Price.toFixed(2)}}</td>
                        <td class="text-center">{{product.Stock-product.WaitSendStock}}</td>
                    </tr>
                </table>
                @*<div class="panel-footer">
                    <div class="form-inline ng-pristine ng-valid">
                        <div class="form-group ">已选择产品：</div>
                        <div class="form-group " ng-repeat="select in SpikeActivityInfoList">
                            <a href="" class="mr-sm label label-primary" ng-click="SpikeActivityInfoList.splice($index, 1);" title="{{select.Name}}">
                                {{select.Name}}
                            </a>
                        </div>
                    </div>
                </div>*@
                <div class="panel-footer text-right">
                    <button type="button" class="btn btn-primary" ng-click="closeDialog()">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </script>
</div>

<script>
    App.controller("DrawRewardEditNewCtrl", [
   '$scope', '$resource', '$state', '$rootScope', '$route', 'ngDialog', '$http', '$stateParams', 'ngTableParams', 'ngTableDataService',  'Notify','$filter',
   function ($scope, $resource, $state, $rootScope, $route, ngDialog, $http, $stateParams, ngTableParams, ngTableDataService, Notify,$filter) {
       'use strict';
       $scope.submitted = false;
       $scope.Reward = {};
       $scope.Reward.DrawId = $stateParams.DrawId;
       $scope.isLoadingProduct = true;
       $scope.ProductList = [];
       $scope.ProductSelectModel = {};
       //$scope.SpikeActivityInfoList = [];


       

       $http.post("/Order/GetProductCateList").then(function (response) {
           $scope.CategoryList = response.data.data;
           //获取一级分类
           $scope.FirstCategoryList = $filter('filter')($scope.CategoryList, function (item) { return item.ParentId === 0; });
       });

       //获取二级分类
       $scope.GetSecondCategory = function () {
           $scope.SecondCategoryList = $filter('filter')($scope.CategoryList, function (item) { return item.ParentId === $scope.ProductSelectModel.FirstCategoryId; });
       }

       //返回列表页
       $scope.cancel = function () {
           $state.go("app.drawRewardEdit", {Id:$stateParams.DrawId});
       }

       //获取优惠券列表
       $http.post('/Draw/GetActCoupons').then(function (response) {
           $scope.AllCoupons = response.data;
       })

       $scope.changeType = function () {
           console.log($scope.Reward.RewardType);
           if ($scope.Reward.RewardType == '@((int)RewardType.优惠券)') {
               $scope.ProductList = $scope.AllCoupons;
               $scope.Reward.ProductSecpId = 0;
           }
           else if ($scope.Reward.RewardType == '@((int)RewardType.实体商品)') {
               $scope.ProductList = [];
               $scope.Reward.ProductSecpId = 0;
               $scope.ChosenProduct = {};
           }
           else if ($scope.Reward.RewardType == '@((int)RewardType.奖励积分)') {
               $scope.ProductList = [{ Id: 0, Name: "积分奖励" }];
               $scope.Reward.ProductSecpId = 0;
           }           
       }

       //数据初始化
       $http.post("/Draw/GetRewardInfo", { Id: $stateParams.Id }).then(function (response) {
           if (response.data.Reward.Id > 0) {
               $scope.Reward = response.data.Reward;
               $scope.ChosenProduct = response.data.ProductStep;
               $scope.InitType();
           }
       })

       $scope.InitType = function () {
           if ($scope.Reward.RewardType == '@((int)RewardType.优惠券)') {
               $scope.ProductList = $scope.AllCoupons;
           }
           else if ($scope.Reward.RewardType == '@((int)RewardType.奖励积分)') {
               $scope.ProductList = [{ Id: 0, Name: "积分奖励" }];
               $scope.Reward.ProductSecpId = 0;
           }
       }

       //奖项类型选择相关
       if ($scope.Reward.RewardType == '@((int)RewardType.优惠券)') {
           $scope.ProductList = $scope.AllCoupons;
           alert($scope.Reward.ProductSecpId);
       }
       else if ($scope.Reward.RewardType == '@((int)RewardType.奖励积分)') {
           $scope.ProductList = [{ Id: 0, Name: "积分奖励" }];
           $scope.Reward.ProductSecpId = 0;
       }

       

       //-----------产品选择相关
       //关联产品选择
       $scope.relationProductSelectInit = function () {
           $scope.ProductSelect = {};
           ngDialog.openConfirm({
               template: 'productSelectDialogId',
               className: 'ngdialog-theme-plain',
               scope: $scope
           }).then(function (value) {
           }, function (reason) {
           }
           );
       }

       //-----------产品选择相关
       $scope.tableParams = new ngTableParams({
           page: 1,
           count: 10,
           sorting: {
           }
       }, {
           getData: function ($defer, params) {
               $scope.isLoadingProduct = true;
               var requestParams = {
                   Skip: (params.page() - 1) * params.count(),
                   Take: params.count(),
                   Keywords: $scope.ProductSelectModel.Keywords,
                   FirstCategoryIdParm: $scope.ProductSelectModel.FirstCategoryId,
                   SecondCategoryIdParm: $scope.ProductSelectModel.SecondCategoryId
               };
               $http.post('/Order/GetProductList', ngTableDataService.getServerSideParams(params.orderBy().toString(), params, requestParams))
                   .success(function (data, status) {
                       params.total(data.total);
                       $defer.resolve(data.data);

                       $scope.isLoadingProduct = false;
                   });
           }
       });

       //关闭产品选择弹框加载已选产品数据
       $scope.closeDialog = function () {
           ngDialog.closeAll();
       }
       //删除已经选择的产品
       $scope.delectThisData = function (id) {
           $scope.ChosenProduct = {};
           $scope.ChosenProduct.Id = 0;
           $scope.Reward.ProductSecpId = 0;
       }

       //判断产品是否已选择
       $scope.isChecked = function (id) {
           var result = false;
           angular.forEach($scope.SpikeActivityInfoList, function (value, key) {
               if (id == value.Id) {
                   result = true;
                   return false;
               }
           });
           return result;
       }

       $scope.checkProduct = function ($event, productSpec) {
           if ($event.target.checked) {
               //$scope.SpikeActivityInfoList.push(productSpec);
               $scope.ChosenProduct = productSpec;
               $scope.Reward.ProductSecpId = productSpec.Id;
               $scope.closeDialog();
           }
       }

       //保存
       $scope.submitForm = function () {
           if ($scope.Reward.RewardName == null || $scope.Reward.RewardName.length <= 0) {
               Notify.alert('请输入奖项名称!', { status: 'warning', timeout: 1000 });
               $scope.IsLoading = false;
               return false;
           }
           if ($scope.Reward.RewardName.length >12) {
               Notify.alert('为方便前端展示,奖项名称不能超过12个字!', { status: 'warning', timeout: 1000 });
               $scope.IsLoading = false;
               return false;
           }
           if ($scope.Reward.Count <= 0) {
               Notify.alert('请输入正确的派发总数!', { status: 'warning', timeout: 1000 });
               $scope.IsLoading = false;
               return false;
           }
           if ($scope.Reward.RewardType == '@((int)RewardType.奖励积分)' && $scope.Reward.Points <= 0) {
               Notify.alert('请输入正确的积分奖励!', { status: 'warning', timeout: 1000 });
               $scope.IsLoading = false;
               return false;
           }
           if ($scope.Reward.WinRate < 0 || $scope.Reward.WinRate > 100) {
               Notify.alert('中奖几率必须在0~100之间', { status: 'warning', timeout: 1000 });
               $scope.IsLoading = false;
               return false;
           }
           if (($scope.Reward.RewardType == '@((int)RewardType.优惠券)' || $scope.Reward.RewardType == '@((int)RewardType.实体商品)') && $scope.Reward.ProductSecpId <= 0) {
               Notify.alert('请选择奖品', { status: 'warning', timeout: 1000 });
               $scope.IsLoading = false;
               return false;
           }


           $http.post('/Draw/SaveReward', { reward: $scope.Reward }).then(function (response) {
               if (response.data.isSuccess) {
                   Notify.alert('保存成功!', { status: 'success', timeout: 1000 });
                   $state.go('app.drawRewardEdit', {Id:$stateParams.DrawId})
               }
               else {
                   Notify.alert(response.data.msg, { status: 'warning', timeout: 1000 });
               }
           })
       }




   }]);
</script>